<template>
  <div class="w100 h100 df fd-c group">
    <h1>部门烟支数量</h1>
    <div class="w100 h100  df department-number">
      <div>
        <ul>
          <li class="w100" style="height: 30px;border: 1px solid #ccc;border-radius: 15px;overflow: hidden;" v-for="(item,index) in list" :key="index">
            <div class="w100 h100 df" style="background-color: #fff;border-radius: 15px;">
              <div style="width: 60%;background-color: #3f7fd2;border-radius: 15px;font-size: 12px" class="df-c h100 ">
                <p class="ov1">{{index}}</p>
              </div>
              <div style="width: calc(100% - 60%);" class="df-c h100">{{item}}</div>
            </div>
          </li>
        </ul>
      </div>
      <div ref="chatBmSmoke"></div>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue";

import * as echarts from "echarts";
import http from "@/http/index";
const chatBmSmoke = ref();

const list = ref([]);
onMounted(async () => {
  const res4 = await http.corsApi("/index/smokeGroupOrg", "get", {});
  console.log("res4", res4);
  list.value = res4.data;
  //   var chartDom = document.getElementById("main");

  let data = [];
  for (const ele in res4.data) {
    console.log(ele);
    data.push({
      name: ele,
      value: res4.data[ele],
    });
  }

  var myChart = echarts.init(chatBmSmoke.value);
  var option;

  option = {
    //   title: {
    //   text: 'Referer of a Website',
    //   subtext: 'Fake Data',
    //   left: 'center'
    // },
    tooltip: {
      trigger: "item",
    },
    legend: {
      // 显示上方的颜色提示
      top: "5%",
      left: "center",
      show: true,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "55%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 4,
          borderColor: "#fff",
          borderWidth: 0,
        },
        label: {
          show: true,
          //   position: ''
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: true,
        },
        data
        // data: [
        //   { value: 1048, name: "工艺质量部" },
        //   { value: 735, name: "信息中心" },
        //   { value: 580, name: "技术中心" },
        // ],
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped lang="scss">
.group {
  padding: 20px;
  box-sizing: border-box;
  h1 {
    font-size: 18px;
    font-weight: 600;

    color: #666666;
  }
}
.department-number {
  > div {
    // border: 1px solid #ccc;
    ul {
      li {
        margin-top: 15px;
      }
    }
  }
  > div:nth-child(1) {
    flex: 4;
  }
  > div:nth-child(2) {
    flex: 6;
  }
}
</style>